<template>
	<el-dropdown trigger="click" @command="handleSetSize">
		<div>
			<svg-icon class-name="size-icon" icon-class="size" />
		</div>
		<el-dropdown-menu slot="dropdown">
			<el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size === item.value" :command="item.value">
				{{ item.label }}
			</el-dropdown-item>
		</el-dropdown-menu>
	</el-dropdown>
</template>

<script>
export default {
	data() {
		return {
			sizeOptions: [
				{ label: 'Default', value: 'default' },
				{ label: 'Medium', value: 'medium' },
				{ label: 'Small', value: 'small' },
				{ label: 'Mini', value: 'mini' },
			],
		};
	},
	computed: {
		size() {
			return this.$store.getters.size;
		},
	},
	methods: {
		handleSetSize(size) {
			this.$ELEMENT.size = size;
			this.$store.dispatch('app/setSize', size);
			this.refreshView();
			this.$message({
				message: 'Switch Size Success',
				type: 'success',
			});
		},
		refreshView() {
			// In order to make the cached page re-rendered
			this.$store.dispatch('tagsView/delAllCachedViews', this.$route);

			const { fullPath } = this.$route;

			this.$nextTick(() => {
				this.$router.replace({
					path: '/redirect' + fullPath,
				});
			});
		},
	},
};
</script>
